<%-- 
    Document   : customerexpand
    Created on : Aug 11, 2012, 10:19:09 AM
    Author     : ems
--%>


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<f:subview id="conf425475">
    <html>
        <head>

            <script type="text/javascript" language="javascript" src="../scripts/jQuery/confirm.js"></script>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
            <link rel="stylesheet" type="text/css" href="../css/paging.css"/>
            <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
            <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
            <script type="text/javascript" language="javascript">
                var open_cur = 0;
                $j = jQuery.noConflict();
                $j(document).ready(function(){

                    initThickBox('.thickbox');
//                    $j('input#leavedate1').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
//                    $j('input#dateStart').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
//                    $j('input#dateEnd').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true });
                   
                    $j('.keysearch').live('keyup',function(){
                        if($j('.keysearch').val() == ""){
                            $j('.rich-table-row').show();
                                   
                        }else{
                            $j('.rich-table-row').hide();
                            $j('.rich-table-row').each(function(){
                                html = $j(this).html();
                                if(   ununicode(html).indexOf(  ununicode($j('.keysearch').val()) ) > -1    )  {
                                    $j(this).show();
                                }else{
                                    $j(this).hide();
                                }
                            });
                        }

                    });
                    $j(".checkAll").live("click",function(){
                        flag = $j('.checkAll').is(':checked');

                        $j(".check_select").each(function(){
                            $j('.check_select')  .attr('checked', flag);
                        });


                    });
                    
                  
                    //Tab4Kapi();
                    // searchClient();
                    $j('.search_box').hide();       
                    $j('.sidebar_search').live('click',function(){
                        $j('.search_box').hide();
                        if($j(this).next().hasClass('active')){

                            $j('.search_box').removeClass('active');
                        }else{

                            $j('.search_box').removeClass('active');
                            $j(this).next().addClass('active');
                            $j(this).next().show();
                        }
                    });
                    $j(".content_right").live("click",function(){
                        $j('.search_box').hide();
                    });
                 
                });
            </script>
            <style type="text/css">
                #fancybox-wrap{

                }
                .fields_input{
                    float:left;
                    width:100%;

                    height:28px;
                }
                .button-link{
                    border:0;
                    background:url(../images/bg_submit.gif) repeat-x;
                    width:134px;
                    float:right;
                    margin:19px 0 10px 0;
                    color:#ffffff;
                    font-size:14px;
                    font-weight:bold;
                    cursor:pointer;
                    border-radius:5px;
                    box-shadow:0 2px 3px #666666;
                    padding:8px 0;
                    text-transform:uppercase;
                }
                .customer-box{
                    float:left; width:720px; margin-left:25px;
                    border:1px solid #CCCCCC;
                    padding:18px 0px 10px 0px;
                    background: #E5E8EA;
                    border-top: none;

                }
                .customer-box label{
                    width:130px;
                    text-align: right;
                    float:left;
                }
                input{
                    float:left;
                    margin-left:9px;
                }
                select{
                    float:left;
                    height: 21px;
                    width:166px;
                    margin-left:9px;
                }
                .ui-datepicker-header select{
                    width:45% !important;
                }
                .header-box{
                    margin-left:25px;
                    color:#0055A6;
                    font-weight:bold;
                    margin-top:15px;
                    float: left;
                    cursor:pointer; padding:4px 0px 0px 4px; width:716px; border:1px solid #CCCCCC;
                    font-size:15px;
                    background: #E5E8EA;
                    height: 21px;
                }
                .fixdate .ui-datepicker-trigger  { margin-left: 4px;}

                .boder-bomttom{border-bottom:none;}
                .buttonsearch{
                    border:0;
                    background:url(../images/btn_search.png) repeat-x;
                    width:30px; height:30px;
                    color:#ffffff;
                    cursor:pointer;
                    text-transform:uppercase;
                }
                .feild_sex td label{width: 150px !important; color:white; font-size:12px; text-transform: none; margin-left:3px;}
                .buttonsearch:hover .group{display: block !important;}
                .buttonsearch2{
                    border:0;
                    background:url(../images/bg_submit.gif) repeat-x;
                    width:68px;

                    margin:0px 0 10px 20px;
                    color:#ffffff;
                    font-size:12px;
                    font-weight:bold;
                    cursor:pointer;
                    border-radius:2px;
                    padding:4px 0;
                    text-transform:uppercase;
                }
                
                .sort_num_
                {
                    background: url("../images/bg_button3.gif") repeat-x scroll 0 0 transparent !important;
                    width:40px;
                    height: 20px;
                    color: #82A6C7;
                    float: left;
                    padding-right: 15px;
                }

                .fast_search_
                {
                    margin-left: 300px;
                    margin-top: 11px;
                    position: absolute;
                }
                .fast_search_ input[type="text"] {
                    border: 1px solid #138EF9;
                    border-radius: 4px 4px 4px 4px;
                    float: left;
                    height: 35px;
                    width: 300px;
                }
               
            </style>
        </head>


        <body>
            <a4j:form>
                <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
                <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_CUS_VIEW}'></div>" escape="false"/>
                <div id="content">
                    <div id="menu_top">
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#"><span><h:outputText value="#{locale.area}"/></span></a>
                            </div>
                            <div class="select_hidden">
                                <ul>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#"><span>Outlets</span></a>
                            </div>
                            <div class="select_hidden">
                                <ul>
                                    <li><a href="#"><span>Ban Điều Hành</span></a></li>
                                    <li><a href="#"><span>Nhóm IT</span></a></li>
                                    <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="content_detail">
                        <div class="fast_search_">
                            <h:inputText value="#{timekeeperController.keySearch}" onfocus="if(this.value=='#{timekeeperController.keySearch}')this.value='';" styleClass="keysearch"/>
                            <div  style="margin-left:5px; float:left" class="buttonsearch">
                                <div class="group" style="width:150px;z-index: 999; height:180px; position:absolute; background: #2B3844; color:white !important; top:30px; display:none">
                                    <h:selectOneRadio layout="pageDirection" value="#{timekeeperController.typeSearch}" styleClass="feild_sex"  style="margin-left:5px; margin-top:4px; padding:15px; width:195px; height:140px;"   >
                                        <f:selectItem itemValue="0" itemLabel="Tất cả"/>
                                        <f:selectItem itemValue="1" itemLabel="Ðiện thoại"/>
                                        <f:selectItem itemValue="2" itemLabel="Họ tên"/>                                        
                                    </h:selectOneRadio>
                                    <h:commandButton action="#{timekeeperController.reload}" value="Search" style="margin-left:15px; margin-top:2px;" styleClass="buttonsearch2">
                                    </h:commandButton>
                                </div>
                            </div>                  
                        </div>
                        <!-- start sidebar sidebar_row1--->
                        <!-- end sidebar row1--->
                        <!-- start sidebar row2--->
                        <div class="sidebar_row2">
                            <div class="sidebar">
                                <div class="sidebar_search">
                                    <span> <h:outputText value="#{locale.search}"/></span>
                                </div>
                                <div class="search_box" style="display:none;">

                                    <h3><h:outputText value="#{locale.search}"/></h3>
                                    <div class="fields_input">
                                        <input name="" type="text"  value="<h:outputText value="#{locale.search_key}"/>..." onblur="if(this.value=='')this.value='<h:outputText value="#{locale.search_key}"/>...';" onfocus="if(this.value=='<h:outputText value="#{locale.search_key}"/>...')this.value='';" />
                                        <input name="" type="submit" value="OK" />
                                    </div>

                                    <h4><h:outputText value="#{locale.advance_search}"/></h4>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.group}"/> / <h:outputText value="#{locale.Departments}"/></option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.sex}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.position}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_select">
                                        <select name="">
                                            <option><h:outputText value="#{locale.income}"/>...</option>
                                        </select>
                                    </div>
                                    <div class="fields_submit">
                                        <input name="" type="submit" value="<h:outputText value="#{locale.search_option}"/>" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- end sidebar row2--->

                        <div class="fillter">
                            <div class="dropdown">
                                     <div class="select_choise">
                                    <h:outputLink  value="#" ><span>Filter</span> </h:outputLink>
                                    
                                </div>
                                    <div class="select_hidden">
                                <ul>
                                    <li> <h:outputLink  value="employeeLate.jsp" ><span>Đi trễ /về sớm</span> </h:outputLink></li>
                                    <li> <h:outputLink  value="#" ><span> Vi phạm trong SX</span> </h:outputLink></li>
                                    <li> <h:outputLink  value="#" ><span>NV nghĩ phép</span> </h:outputLink></li>
                                </ul>
                            </div>

                            </div>
                        </div>
                        <div class="content_right">

                            <div class="content">
                                <div class="title" style="margin-bottom:15px">

                                    <div class="sort">
                                        <div class="sort_num_">
                                                <h:outputLink value="attendanceInput.jsp?height=282px&width=345px" styleClass="fancybox add_new" id="fancybox">
                                                    <span>  <h:outputText value="ADD" style="color:white;margin-left: 14px;"/> </span>
                                                </h:outputLink>
                                            </div>
                                        <div class="sort_char">
                                            <jsp:include page="../../common/search.jsp"/>

                                        </div>
                                    </div>
                                </div>

                                <rich:dataTable value="#{timekeeperController.listTabN150}" var="emp"
                                                rows="50"
                                                onRowMouseOver="this.style.backgroundColor='#DEE1E2'"
                                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                style=" "

                                                width="1200px" columnClasses=",columns,columns,columns" rowKeyVar="row"
                                                id="table" styleClass="machinePosDataTable">


                                    <rich:column style="width:20px;">
                                        <f:facet name="header">
                                            <h:outputText value="Mã ca" />
                                        </f:facet>
                                        <div style="width:20px;">
                                            <h:outputText value="#{emp.cv251}" />
                                        </div>
                                    </rich:column>
                                    
                                    <rich:column width="50px">
                                        <f:facet name="header">
                                            <h:outputText value="Giờ vào ca" />
                                        </f:facet>

                                        <div style="width:50px;">
                                            <h:outputText value="#{emp.cv254}" />
                                        </div>
                                    </rich:column>


                                    <rich:column  width="50px">
                                        <f:facet name="header">
                                            <h:outputText value="Giờ ra ca" />
                                        </f:facet>

                                        <div style="width:50px;">
                                            <h:outputText value="#{emp.cv255}" />
                                        </div>
                                    </rich:column>
                                    
                                    <rich:column  width="120px">
                                        <f:facet name="header">
                                            <h:outputText value="Họ tên" />
                                        </f:facet>

                                        <div style="width:120px;">
                                            <h:outputText value="#{emp.hoten}" />
                                        </div>
                                    </rich:column>
                                    <rich:column  width="160px">
                                        <f:facet name="header">
                                            <h:outputText value="Email" />
                                        </f:facet>

                                        <div style="width:160px;">
                                            <h:outputText value="#{emp.nv120}" />
                                        </div>
                                    </rich:column>


                                    <rich:column  style="width:70px">
                                        <f:facet name="header">
                                            <h:outputText value="Điện thoại" />
                                        </f:facet>
                                        <div style="width:70px">
                                            <h:outputText value="#{emp.nv121}" />
                                        </div>

                                    </rich:column>
                                    <rich:column width="30px">
                                        <f:facet name="header">
                                            <h:outputText value="Vào/Ra" />
                                        </f:facet>

                                        <div style="width:30px;">
                                            <h:outputText value="#{emp.nv151}" />
                                        </div>
                                    </rich:column>
                                    <rich:column  style="width:60px;text-align:center;">
                                        <f:facet name="header">
                                            <h:outputText value="TG" />
                                        </f:facet>
                                        <div style="width:60px">
                                            <h:outputText value="#{emp.nd152s}" />
                                        </div>

                                    </rich:column>
                                     <rich:column  style="width:30px">
                                        <f:facet name="header">
                                            <h:outputText value="Trạng thái" />
                                        </f:facet>
                                        <div style="width:30px">
                                            <h:outputText value="#{emp.nv153}" />
                                        </div>

                                    </rich:column>
                                    <rich:column  style="width:30px">
                                        <f:facet name="header">
                                            <h:outputText value="TG Sớm/Muộn" />
                                        </f:facet>
                                        <div style="width:30px">
                                            <h:outputText value="#{emp.status}" />
                                        </div>

                                    </rich:column>
                                     <rich:column  width="30px">
                                        <f:facet name="header">
                                            <h:outputText value="TG làm việc" />
                                        </f:facet>

                                        <div style="width:30px;">
                                            <h:outputText value="#{emp.WKTIME}" />
                                        </div>
                                    </rich:column>
                                    <rich:column  style="width:auto">
                                        <f:facet name="header">
                                            <h:outputText value="NV Xác nhận" />
                                        </f:facet>
                                        <div style="width:auto">
                                            <h:outputText value="#{emp.nv158}" />
                                        </div>

                                    </rich:column>

                                    <f:facet name="footer">
                                        <rich:datascroller id="ds" for="table"></rich:datascroller>
                                    </f:facet>
                                </rich:dataTable>


                                <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                                 height="30" width="40" zindex="2000">
                                    <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                                </rich:modalPanel>
                               

                            </div>
                        </div>
                    </div>
                </div>
            </a4j:form>

        </body>
    </html>
</f:subview>
